<template>
  <div class="dashboard-editor-container">
    <div>
      <h2>统计报表导出</h2>
      <div style="display: flex;gap: 10px;">
        <!-- <el-select v-model="daoForm.district" placeholder="请选择">
          <el-option v-for="item in districtOptions" :key="item" :label="item" :value="item">
          </el-option>
        </el-select> -->
        <el-button type="primary" @click="handleDao">导出统计</el-button>
      </div>

    </div>
    <div>
      <h2>人数统计 (总人数:{{ zongNum }})</h2>
      <BarChartTwo :chartData=chartDataTwo></BarChartTwo>
    </div>
    <div>
      <h2>部门统计</h2>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="区县" prop="district">
          <el-select v-model="searchForm.district" placeholder="请选择">
            <el-option v-for="item in districtOptions.slice(1)" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-select v-model="searchForm.dept" placeholder="请选择">
            <el-option v-for="item in departmentOptions" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <bar-chart :chartData=chartData :chartOption={} />
    </div>
  </div>
</template>

<script>
import BarChart from '@/components/Charts/BarChart'
import BarChartTwo from '@/components/Charts/BarChartTwo'
import QuestionnaireApi from "@/modules/questionnaire/api/questionnaire"
export default {
  name: 'DashboardAdmin',
  components: {
    BarChartTwo,
    BarChart,
  },
  data() {
    return {
      searchForm: {
        district: "宝塔区",
        dept: "财务部"
      },
      daoForm: {
        district: "全部"
      },
      districtOptions: [
        '全部',
        '宝塔区',
        '安塞区',
        '子长市',
        '延长县',
        '延川县',
        '志丹县',
        '吴起县',
        '甘泉县',
        '富县',
        '洛川县',
        '宜川县',
        '黄龙县',
        '黄陵县',
      ],
      departmentOptions: [
        '财务部',
        '市场部',
        '政企部',
        '网络部',
        '品管部'
      ],
      chartData: {},
      chartDataTwo: [],
      zongNum: 0
    }
  },
  methods: {
    handleDao() {
      QuestionnaireApi.excelExport().then(res => {
        const elink = document.createElement('a');
        elink.download = `问卷调查统计.xlsx`;
        elink.style.display = 'none';
        const blob = new Blob([res.data], { type: 'application/x-msdownload' });
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      })
    },
    handleQuery() {
      this.getCharData()
    },
    getCharData() {
      QuestionnaireApi.excelDeptStats({ ...this.searchForm }).then(res => {
        if (res.data.code == 200) {
          this.chartData = {
            data0: [],
            data1: [],
            data2: [],
            data3: [],
            data4: []
          }
          let respData = res.data.data
          Object.keys(respData[0]).forEach(item => {
            if (item.includes('data')) {
              let num = item.split("_")[1]
              this.chartData[`data${num}`][0] = respData[0][item]
            } else if (item.includes('analysis')) {
              let num = item.split("_")[1]
              this.chartData[`data${num}`][1] = respData[0][item]
            } else if (item.includes('emphasis')) {
              let num = item.split("_")[1]
              this.chartData[`data${num}`][2] = respData[0][item]
            } else if (item.includes('guidance')) {
              let num = item.split("_")[1]
              this.chartData[`data${num}`][3] = respData[0][item]
            }
          })
          console.log(this.chartData, 999)
        }
      })
    }
  },
  mounted() {
    this.getCharData()
    QuestionnaireApi.selCountDistrict().then(res => {
      if (res.data.code != 200) {
        return
      }
      let respData = res.data.data
      this.zongNum = respData.reduce((accumulator, currentValue) => {
        return Number(accumulator) +  Number(currentValue.count);
      }, 0); // 初
      this.chartDataTwo = this.districtOptions.slice(1).map(item => {
        let obj = {
          district: "",
          count: ""
        }
        let ids = respData.findIndex(label => label.district == item)
        if (ids == -1) {
          obj.district = item
          obj.count = 0
        } else {
          obj = respData[ids]
        }
        return obj
      })

    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  // background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }

  .item-wrapper {
    margin-bottom: 32px;
  }

  .label-wrapper {
    color: #293c55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 10px 2px 10px;
    margin: 0;
    display: block;
    font-size: 14px;
    text-align: left;
  }

  .heatmap-chart-wrapper {
    background: #fff;
    padding: 8px 8px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }
}
</style>
